import Navbar from '@/components/Navbar';
import { observer } from 'mobx-react-lite';
import { Image, Text, View } from '@tarojs/components';
import Forbid from '@/static/images/icon/forbid.png';
import './index.less';
import systemStore from '@/stores/SystemStore';
import reportStore from '@/stores/ReportStore';
import { ReportEntity } from '@/entities/ReportEntity';
import { useEffect, useState } from 'react';
import HouseBusiness from '@/business/HouseBusiness';
import ReportCard from '@/components/ReportCard';

function TenantReport() {
  const {tenantReportList} = reportStore;
  const [houseList, setHouseList] = useState<any[]>([]);
  /**
   * 通过房屋id获取房屋列表
   */
  const getHouseListByHouseId = async () => {
    if (tenantReportList?.length) {
      const houseIdArr = tenantReportList?.map(t => t.houseId);
      const res: any = await HouseBusiness.getHouseListByHouseId([...new Set(houseIdArr)].join(','));
      setHouseList(res);
    }
  };

  useEffect(() => {
    getHouseListByHouseId();
  }, []);

  /**
   * 获取房屋名称
   */
  const getHouseName = (houseId: number) => {
    return houseList.find(h => h.id === houseId)?.name;
  };

  return (
    <Navbar
      title='报修记录'
      mode='back'
      bgColor='var(--mini-first)'
    >
      <View className='tenant-report-container' style={ {height: systemStore.haveNavbarNotTabbarHeight} }>
        {
          tenantReportList?.length ?
            tenantReportList?.map((report: ReportEntity.IReport, idx: number) => {
              return (
                <ReportCard
                  key={ idx }
                  houseName={ getHouseName(report.houseId) }
                  status={ report.status }
                  reason={ report.reason }
                  createdAt={ report.createdAt }
                  updatedAt={ report.updatedAt }
                  images={ JSON.parse(report.image) }
                  video={ report.video }
                />
              );
            }) :
            (
              <View className='no-report-application'>
                <Image src={ Forbid } className='forbid-icon'/>
                <Text>暂无报修记录</Text>
              </View>
            )
        }
      </View>
    </Navbar>

  );
}

export default observer(TenantReport);